<template>
  <div class="">
    <div class="auth-code-btn" :style="Styles" v-if="countDown == 180">
      <p>{{ authCodeHtml }}</p>
    </div>
    <div class="auth-code-btn" :style="Styles" v-else>
      <p>{{ countDown }}秒后重新发送</p>
    </div>
  </div>
</template>
<script>
/*
 * 倒计时按钮
 * @{props} Styles :自定义样式
 * @{props} countTime ： 倒计时时间
 * @even sendCode : 点击按钮的回调
 */
export default {
  components: {},
  props: {
    Styles: {
      type: Object,
      default: () => {},
    },
    countTime: {
      type: Number,
      default: 180,
    },
  },
  data() {
    return {
      authCodeHtml: "发送验证码",
      countDown: this.countTime,
    };
  },
  methods: {
    sendCode() {
      if (this.countDown < 180) {
        return;
      }

      let that = this;

      let timer = null;

      that.countDown = that.countDown - 1;

      timer = setInterval(() => {
        if (this.countDown > 0) {
          that.countDown = that.countDown - 1;
        } else if (this.countDown == 0) {
          clearInterval(timer);

          this.countDown = 180;
        }
      }, 1000);

      this.$emit("sendCode", true);
    },
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
.auth-code-btn {
  width: 100%;
  height: 40px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: rgb(101, 164, 252);
  border-radius: 2px;
  cursor: pointer;
}
</style>